<script setup lang='ts'>
import { ref, onMounted } from 'vue'; // 补充导入
import http from '@/api/http';
import { tuy } from '@/types/pder';
import * as echarts from 'echarts';

// 声明响应式数组（用 const 更规范）
const tt = ref<number[]>([]); // 假设 monthNumber 是数字
const tt1 = ref<number[]>([]); // 假设 totalAmount 是数字
const dd=ref([])
const dd1=ref([])
// 声明 ECharts 实例
const myChart = ref<echarts.ECharts | null>(null);
const zz=ref('2025')
const bb=ref('')
const dd2=ref(false)
const numberArray = ref([1, 2, 3]);
const dian1=(event)=>{

if(event.target.textContent=='映射简化'){
    dd2.value=true
event.target.textContent='隐藏'
}else{
    dd2.value=false
    event.target.textContent='映射简化'
}
}
// 图表配置项（初始数据为空）
const option = {
  title: [{ text:'月份与订单量' }],
  polar: { radius: [30, '80%'] },
  radiusAxis: { max: 50 },
  angleAxis: {
    type: 'category',
    data: [],
    startAngle: 75
  },
  tooltip: {},
  series: {
    type: 'bar',
    data: [],
    coordinateSystem: 'polar',
    label: {
      show: true,
      position: 'middle',
      formatter: '{c}' // 显示当前值，根据需求调整
    }
  },
  animation: false
};
const dian=()=>{
    zz.value=bb.value
    cha()
}
const cha = () => {
  http.getList<tuy>('Pder/MonthStatistics', { nian: zz.value })
    .then(res => {  
      console.log('接口返回数据', res.data);
      // 清空并填充数据
      tt.value = [];
      tt1.value = [];
      dd.value=[];
      dd1.value=[];
      res.data.forEach(v => {
        tt.value.push(v.monthNumber);
        tt1.value.push(v.totalAmount);
        dd.value.push(v.jinAmount)
        dd1.value.push(v.shuAmount)
      });
      console.log('tt数据', tt.value);
      console.log('tt1数据', tt1.value);

      // 更新图表数据并重新渲染
      option.angleAxis.data = tt.value;
      option.series.data = tt1.value;
      myChart.value?.setOption(option);
    })
    .catch(err => {
      console.log('请求错误: ', err);
    });
};

const formatCurrency = (amount, currency = 'CNY') => {
  // 处理非数字情况
  if (isNaN(amount)) return '¥0.00'
  
  // 根据货币类型选择符号和格式
  const options = {
    CNY: { symbol: '¥', decimal: 2 },
    USD: { symbol: '$', decimal: 2 },
    EUR: { symbol: '€', decimal: 2 }
  }
  
  const { symbol, decimal } = options[currency] || options.CNY
  
  // 格式化格式化数字（千分位+保留小数）
  const formatted = amount.toFixed(decimal).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
  
  // 拼接符号（根据货币类型调整符号位置）
  return currency === 'USD' || currency === 'EUR' 
    ? `${symbol}${formatted}`  // $1,234.56
    : `${symbol}${formatted}`  // ¥1,234.56（人民币符号在前）
}
const hh=computed(()=>{
    return tt1.value.reduce((sum, current) => sum + current, 0)
})
const hh1=computed(()=>{
    return dd.value.reduce((sum, current) => sum + current, 0)
})
const hh2=computed(()=>{
    return dd1.value.reduce((sum, current) => sum + current, 0)
})
onMounted(() => {
  // 初始化 ECharts 实例（确保DOM存在）
  const dom = document.getElementById('main');
  if (dom) {
    myChart.value = echarts.init(dom);
  }
  // 发起数据请求
  cha();
});
</script>

<template>
     <div id="main">      
     </div>    
    <div id="main1">
        <span>当前年份:{{ zz }}</span>
        <el-input  v-model="bb" style="width: 200px; margin-left: 150px;" size="small" placeholder="输入需要查看的年份" />
        <el-button @click="dian" style="height: 25px; margin-left: 5px;" type="info" plain>查询</el-button><br></br>
         <div style="margin-top: 15px;">
        <span style="margin-top:200px;">当前年份每月总收益:</span>
       <table style="width:550px;"  class="basic-border-table" >
        <tr>
            <th style="width: 50px;">月份</th>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
            <th>6</th>
            <th>7</th>
            <th>8</th>
            <th>9</th>
            <th>10</th>
            <th>11</th>
            <th>12</th>
        </tr>
        <tr> 
            <td align="center" valign="middle">金额</td>     
          <td  align="center" valign="middle" v-for="(item, index) in dd" :key="index" class="table-item">
            {{ item }}
          </td>
        </tr>
      </table>
      </div>
      <div style="margin-top: 30px;">
        <span >当前年份每月总销商品售数:</span>
       <table style="width:550px;"  class="basic-border-table" >
        <tr>
            <th style="width: 50px;">月份</th>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
            <th>6</th>
            <th>7</th>
            <th>8</th>
            <th>9</th>
            <th>10</th>
            <th>11</th>
            <th>12</th>
        </tr>
        <tr> 
            <td align="center" valign="middle">数量</td>     
          <td  align="center" valign="middle" v-for="(item, index) in dd1" :key="index" class="table-item">
            {{ item }}
          </td>
        </tr>
      </table>
      <span>总订单量:{{ hh }}</span>
       <span style="margin-left: 20px;">总销售商品量:{{ hh2 }}</span>
       <span style="margin-left: 20px;">总收益:{{formatCurrency(hh1, 'CNY')}}</span>
      </div>
      <el-button @click="dian1" style="margin-top: 30px;" size="small" round>映射简化</el-button>
       
    </div>
    <div v-show="dd2" style="margin-top: 30px; ">
        
       <table style="width:550px;"  class="basic-border-table" >
        <tr>
            <th style="width: 80px;">月份</th>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
            <th>6</th>
            <th>7</th>
            <th>8</th>
            <th>9</th>
            <th>10</th>
            <th>11</th>
            <th>12</th>
        </tr>
        <tr> 
            <td align="center" valign="middle">订单数量</td>     
          <td  align="center" valign="middle" v-for="(item, index) in tt1" :key="index" class="table-item">
            {{ item }}
          </td>
        </tr>
      </table>    
      </div>
      
      
     
  
</template>

<style scoped>
#main {
  float: left;
  width: 380px;
  height: 300px;
  /* 确保容器可见 */
  
}
#main1 {
 float: left;

  width: 550px;
  height: 300px;
  /* 确保容器可见 */
   
}
.demo-panel {
     float: left;
  display: flex;
  align-items: center;
  justify-content: center;
  height:200px;
}
.basic-border-table {
  border-collapse: collapse; /* 合并边框，避免重叠变粗 */
}

.basic-border-table th,
.basic-border-table td {
  border: 1px solid #ccc; /* 1px 灰色实线边框 */
}


</style>